<template>
    <div class="layout-wrapper">
        <el-card class="table-wrapper">
            <UserTable ref="userTable" @show-permission="showPermission" />
        </el-card>

        <el-drawer v-model="showPermissionComponent" title="权限管理" size="35%" :show-close="true"
            :before-close="closePermission" direction="rtl" :destroy-on-close="true">
            <UserPermission :userinfo="permissionUserinfo" />
        </el-drawer>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { getAsyncComponent } from '@/utils/asyncComponentLoader';
import UserTable from './components/UserTable.vue';

const UserPermission = getAsyncComponent(() => import('./components/UserPermission.vue'));
const userTable = ref(null);
const showPermissionComponent = ref(false);
const permissionUserinfo = ref(null);
function showPermission(userinfo) {
    if (!userinfo) {
        return;
    }
    permissionUserinfo.value = userinfo;
    showPermissionComponent.value = true;
}

function closePermission() {
    userTable.value.clearCurrentRow();
    showPermissionComponent.value = false;
}
</script>

<style scoped>
.layout-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: stretch;
    position: relative;
}

.table-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

:deep(.el-drawer__header) {
    margin-bottom: 0;
}
</style>